<template>
    <div class="enroll">
        <div class="box">
            <h2>商标注册系统</h2>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"  class="demo-ruleForm">
                <el-form-item label="" prop="id">
                    <el-input  placeholder="用户昵称" v-model="ruleForm.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="account">
                    <el-input  placeholder="登录账号" v-model="ruleForm.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  label="" prop="passwrod">
                    <el-input  type="password" placeholder="登录密码" show-password v-model="ruleForm.passwrod" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  label="" prop="affirm">
                    <el-input  type="password" placeholder="确认密码" show-password v-model="ruleForm.affirm" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  class="verify"   label="" prop="verify">
                    <el-input  placeholder="请输入验证码" v-model="ruleForm.verify" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <p class="text">
                        <el-checkbox v-model="checked" >我已阅读</el-checkbox>
                        <el-button class="deal" type="text" >注册协议</el-button>
                    </p> 
                </el-form-item>
                <el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')">提交信息</el-button>
                </div>
                </el-form-item>
            </el-form>
            <div class="forget">
                <div class="line"></div>
                <div class="pass" type="text">请输入你要查询的信息关联</div>
                <div class="line"></div>
            </div>
            <div class="home-link">
                <el-button type="primary" icon="el-icon-s-home"></el-button>
                <el-button type="primary" @click="returnLogin" icon="el-icon-right"></el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'BaseEnrolls',
    data() {
       var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.affirm !== '') {
            this.$refs.ruleForm.validateField('affirm');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.passwrod) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        checked:false,
        ruleForm: {
            id: '',
            account: '',
            passwrod: '',
            affirm:'',
            verify:''
        },
        rules: {
          id: [
             { required: true, message: '请输入昵称', trigger: 'blur' },
          ],
          account: [
            { required: true, message: '请输入账号', trigger: 'blur' },
          ],
          passwrod: [
            { validator: validatePass, trigger: 'blur' },
          ],
          affirm: [
            {  validator: validatePass2, trigger: 'blur' },
          ],
          verify: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
          ]
        }
      };
    },
    //该路由守卫用于跳转到登录界面时不再弹出提示框
    beforeRouteLeave(to,from,next){
        if(to.name == 'login'){
            console.log(to);
            
            to.meta.judegLogin =false
        }
        next()
    },
    methods: {
        open1() {
        this.$message({
            message: '请阅读注册协议',
            type: 'warning'
        });
        },
        open2() {
            let _this = this
            this.$message({
            message: '恭喜你，注册成功',
            type: 'success',
            duration:1500,
            onClose(){
              _this.$router.replace({
                path: "/login",
                query:{ name:'ww'}
              });
            }
            });
        },
        open3() {
        this.$message({
            message: '请填写完整信息',
            type: 'warning',
            duration:1500,
        });
        },
        returnLogin(){
            this.$router.push({
                path: "/login",
            });
        },
        submitForm(formName) {
        let check = this.checked
        this.$refs[formName].validate((valid) => {
            if(valid) {
                if(check){
                    this.open2()
                }else{
                    this.open1()
                }
            } else {
                this.open3()
                console.log('error submit!!');
                return false;
            }
        });
        }
    }
}
</script>
<style scoped lang="less">
.enroll{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-image: url('../../assets/img/bg.jpg');
    background-size: 100% 100%;
    
}
    .box{
        padding:20px 40px ;
        width: 400px;
        min-height: 400px;
        background-color: #ffffff50;
        border-radius: 5px;
        transition: .5s;
        
        h2{
            margin: 0 0 30px;
            width: 100%;
            height: 30px;
            color: #606266;
            font-weight: 400;
        }
        .verify{

          width: 50%;
          text-align: left;
        }
        .login-btn{
            width: 100% ;
            background: #409eff;
            .el-button{
               width: 100% ;
            }
        }
        .suer{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 160px;
             text-align: left;
            .verify{
                width: 50%;
             }
        }
        .text{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 50px;
            .el-button--text {
                margin-left: 5px;
                color:#606266;
            }
        }
        .home-link{
            display: flex;
            justify-content: center;
        }
        .forget{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 50px;
            .el-button--text {
                margin: 0 10px;
                color: #606266;
            }
            .line{
                width: 50%;
                height: 1px;
                background-color: #fff;
            }
        }

        &:hover{
            background-color: #ffffff;
            h2{
                color: #999;
            }
            .line{
                background-color: #999999;
            }
            .el-button--text {
                color: #409eff;
             }
        }
    }
</style>